<template>
  <a-layout>
    <a-layout-content style="padding: 24px 50px; min-height: 280px;">
      <a-space size="4">
        <a-input-search
            v-model:value="param.value"
            placeholder="输入昵称"
            enter-button="搜索"
            size="large"
            @search="onSearch"
        />
        <a-button type="primary" @click="add" size="large">新增</a-button>
      </a-space>
      <a-table
               :data-source="users"
               :row-key="record => record.id"
               :pagination="pagination"
               :loading="loading"
               @change="handleTableChange"
      >
        <a-table-column title="用户名" data-index="username" ></a-table-column>
        <a-table-column title="昵称" data-index="name" ></a-table-column>
        <a-table-column title="密码" data-index="password" ></a-table-column>
        <a-table-column title="操作" key="action" >
            <template v-slot="{text, record}">
              <a-space size="small">
                <a-button type="primary" @click="edit(record)">编辑</a-button>
                <a-button type="primary" @click="resetPassword(record)">重置密码</a-button>
                <a-popconfirm
                    title="确认要删除吗？删除后不可恢复"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="handleDelete(record)"
                >
                  <a-button type="primary" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
        </a-table-column>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal
      title="用户表单-编辑"
      v-model:visible="editVisible"
      :confirm-loading="editConfirmLoading"
      @ok="editHandleOk"
      okText="提交"
      cancelText="取消"
  >
    <a-form :model="user" :label-col="{span: 6}" :wrapper-col="{span:14}">
      <a-form-item label="用户名">
        <a-input v-model:value="user.username" :disabled="!!user.id"/>
      </a-form-item>
      <a-form-item label="昵称">
        <a-input v-model:value="user.name" />
      </a-form-item>
      <a-form-item label="密码" v-show="!user.id">
        <a-input v-model:value="user.password" />
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal
      title="用户表单-重置密码"
      v-model:visible="resetPasswordVisible"
      :confirm-loading="resetPasswordConfirmLoading"
      @ok="resetPasswordHandleOk"
      okText="提交"
      cancelText="取消"
  >
    <a-form :model="user" :label-col="{span: 6}" :wrapper-col="{span:14}">
      <a-form-item label="新密码">
        <a-input v-model:value="user.password" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, ref} from 'vue';
import axios from 'axios'
import { message } from 'ant-design-vue';
import {Tool} from "@/util/tool.ts";

export default defineComponent({
  name: "AdminUser",
  setup() {
    const users = ref();
    const param = ref({});
    const pagination = ref({
      current: 1,
      pageSize: 2,
      total: 0,
    });
    const loading = ref(false);
    // 查询所有数据
    const handleQuery = (params) => {
      loading.value = true;
      axios.get("/user/list", {params}).then((response) => {
        const data = response.data;
        loading.value = false;
        if (data.code == 200){
          users.value = data.data.list;

          pagination.value.current = params.page;
          pagination.value.total = parseInt(data.data.total);
        } else {
           message.error(data.message)
        }
      });
    };
    const handleTableChange = (pagination) =>{
        handleQuery({
          page: pagination.current,
          size: pagination.pageSize
        });
    }

    // 编辑
    const editVisible = ref(false);
    const editConfirmLoading = ref(false);
    const user = ref();

    const editHandleOk = () =>{
      editConfirmLoading.value = true;
      user.value.password = hexMd5(user.value.password + MD5_KEY);
      axios.post("/user/save", user.value).then( (resp) => {
        editVisible.value = false;
        editConfirmLoading.value = false;
        if (resp.data.code == 200) {
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize
          });
        } else{
          message.error(resp.data.message)
        }
      })
    }

    const edit = (record) => {
      editVisible.value = true;
      user.value = Tool.copy(record);
    }

    const add = () => {
      editVisible.value = true;
      user.value = {};
    }

    const handleDelete = (record) => {
       let id = record.id;
        axios.delete("/user/delete/" + id).then( (resp) => {
          if (resp.data.code == 200) {
            handleQuery({
              page: pagination.value.current,
              size: pagination.value.pageSize
            });
          } else {
            message.error("删除失败")
          }
        })
    }

    const onSearch = (name) => {
      handleQuery({
        page: pagination.value.current,
        size: pagination.value.pageSize,
        name
      })
    }

    // 重置密码
    const resetPassword = (record) => {
      resetPasswordVisible.value = true;
      user.value = Tool.copy(record);
      user.value.password = '';
    }
    const resetPasswordVisible = ref(false);
    const resetPasswordConfirmLoading = ref(false);

    const resetPasswordHandleOk = () =>{
      resetPasswordConfirmLoading.value = true;
      user.value.password = hexMd5(user.value.password + MD5_KEY);
      axios.post("/user/reset-pass", user.value).then( (resp) => {
        resetPasswordVisible.value = false;
        resetPasswordConfirmLoading.value = false;
        if (resp.data.code == 200) {
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize
          });
        } else{
          message.error(resp.data.message)
        }
      })
    }


    return {
      users,
      pagination,
      loading,
      handleQuery,
      handleTableChange,
      editVisible,
      editConfirmLoading,
      editHandleOk,
      edit,
      user,
      add,
      handleDelete,
      param,
      onSearch,
      resetPasswordVisible,
      resetPasswordConfirmLoading,
      resetPasswordHandleOk,
      resetPassword,
    };
  },
  mounted() {
    let that = this;
    this.handleQuery({
      page: 1,
      size: that.pagination.pageSize
    });
  },

  components: {
    SmileOutlined,
    DownOutlined,
  },
});

</script>


<style scoped>
  img {
    width: 50px;
    height: 50px;
  }
</style>